<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>空格速清 · 正则小工具</title>
<style>
:root{
  --bg:#f5f7fa;
  --card:#fff;
  --accent:#00c4b4;
  --accent-dark:#009688;
  --text:#333;
  --border:#e0e0e0;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px;
}
.container{
  width:100%;
  max-width:720px;
}
h1{
  text-align:center;
  margin-bottom:24px;
  color:var(--accent-dark);
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;
  margin-bottom:24px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}
textarea{
  width:100%;
  min-height:120px;
  resize:vertical;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:16px;
  font-family:Consolas,Monaco,"Courier New",monospace;
}
textarea[readonly]{background:#fafafa}
button{
  background:var(--accent);
  border:none;
  color:#fff;
  padding:10px 24px;
  font-size:16px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
}
button:hover{background:var(--accent-dark)}
#highlightBox{
  white-space:pre-wrap;
  padding:12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafafa;
  font-family:Consolas,Monaco,"Courier New",monospace;
  line-height:1.6;
  min-height:120px;
}
mark{background:#ffeb3b}
</style>
</head>
<body>
<div class="container">
  <h1>空格速清 · 正则小工具</h1>
  <p style="text-align:center; font-size:14px; color:#666; margin:-12px 0 24px;">
  帮助你一键整理大模型生成的文字，再也不用担心多余空格的格式问题
</p>
  <!-- 输入区 -->
  <div class="card">
    <label for="inputText">请输入原文本：</label>
    <textarea id="inputText"
              placeholder="提示：英文/数字前后多余空格会被去除"></textarea>
    <button onclick="processText()">处理空格</button>
  </div>

  <!-- 高亮区 -->
  <div class="card">
    <label>高亮预览（黄色为将被删除的空格）：</label>
    <div id="highlightBox"></div>
  </div>

  <!-- 结果区 -->
  <div class="card">
    <label for="outputText">处理后的文本（可直接复制）：</label>
    <textarea id="outputText" readonly></textarea>
    <button onclick="copyResult()">📋 一键复制</button>
  </div>
  <div id="toast" style="
  position:fixed; top:20px; left:50%;
  transform:translateX(-50%);
  background:#323232; color:#fff;
  padding:10px 20px; border-radius:6px;
  font-size:14px; opacity:0; transition:opacity .3s;
  pointer-events:none; z-index:9999;">
  已复制到剪贴板！
</div>
</div>

<script>
const regex = /(?<![A-Za-z0-9])\s+(?=[A-Za-z0-9])|(?<=[A-Za-z0-9])\s+(?![A-Za-z0-9])/g;

function processText() {
  const original = document.getElementById('inputText').value;
  const highlighted = original.replace(regex, m => `<mark>${m}</mark>`);
  const cleaned = original.replace(regex, '');
  document.getElementById('highlightBox').innerHTML = highlighted;
  document.getElementById('outputText').value = cleaned;
}

/* 轻提示函数 */
function toast(msg, duration = 1500) {
  const el = document.getElementById('toast');
  el.textContent = msg;
  el.style.opacity = 1;
  setTimeout(() => { el.style.opacity = 0; }, duration);
}

/* 原来的 copyResult 改造后 */
function copyResult() {
  const output = document.getElementById('outputText');
  output.select();
  document.execCommand('copy');
  toast('已复制到剪贴板！');
}

</script>
</body>
</html>